<?php
/*
Template Name: 简报
 */
    get_header();
    query_posts(array(
        "meta_key" => "year",
        "orderby" => "meta_value_num",
        "order" => "DESC",
        "cat" => 12
    ));
    $array_year = array();
    while(have_posts()) {
        the_post();
        $theYear = get_post_meta($post->ID, "year")[0];
        if (count($array_year) == 0 || $theYear != array_slice($array_year, -1, 1)) {
            array_push($array_year, $theYear);
        }
    }

    wp_reset_query();
?>
<!-- 列表模块 -->
<div class="main-container">
    <div class="wrap">
        <div class="common-tab-switch">
        </div>
        <div class="issue-container">
            <?php 
                for ($i = 0; $i < count($array_year); $i++) {
                    query_posts(array(
                        "showposts" => 4,
                        "meta_key" => "year",
                        "meta_value" => $array_year[$i],
                        "cat" => 12
                    ));
            ?>
            <dl data-year="<?php echo $array_year[$i]; ?>">
                <dt><?php echo $array_year[$i]; ?></dt>
                <dd class="clearfix">
            <?php
                while(have_posts()) {
                    the_post();
            ?>
                <a href="<?php the_permalink(); ?>" title="">
                    <?php the_post_thumbnail(array(252, 314)); ?>
                    <span class="date"><?php the_title(); ?></span>
                </a>
            <?php
                }
                wp_reset_query(); 
            ?>
                </dd>
            </dl>
            <?php
                }
            ?>
        </div>
    </div>
</div>

<?php
    get_footer();
?>
<script>
    (function() {
        var $con = $('.issue-container');
        var maxYear = $con.find('dl:first').data('year');
        var minYear = $con.find('dl:last').data('year');
        var tabhtml = '';
        var year = maxYear;
        var year2;
        while(year >= minYear) {
            year2 = year - 4;
            tabhtml += '<a href="javascript:;" title="">' + year2 + '-' + year + '</a>';
            year = year2 - 1;
        }
        $con.find('dl').each(function() {
            if ($(this).data('year') < year2) {
                $(this).hide();
            }
        });
        $('.common-tab-switch').html(tabhtml).find('a').addClass('on');
        $('.common-tab-switch').on('click', 'a', function() {
            var text = $(this).text();
            var cYear = text.split('-')[0];
            var cYear2 = text.split('-')[1];
            $con.find('dl').each(function() {
                if ($(this).data('year') <= cYear && $(this).data('year') >= cYear2) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    })();
</script>
</body>
</html>